<style lang="scss" scoped>
@media screen and (max-width: 780px) {
  .wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    background-image: url("~@/assets/imgs/bg2.jpg");
    background-position: right bottom;
  }

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    width: 80%;

    .form-wrap {
      border-radius: 21px;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 30px 0;
      background: #fff;
      padding: 15px;
    }

    h1 {
      text-align: center;
    }
  }

  .sub-btn {
    width: 80%;
    height: 44px;
    background: linear-gradient(90deg, #263c92, #266dd8);
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    border-radius: 22px;
  }

  .page-title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    color: #fff;
    justify-content: center;
    &__img {
      height: 20px;
    }

    &__text {
      font-size: 20px;
      margin-left: 18px;
      font-weight: bold;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

@media only screen and (min-width: 780px) {
  .wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    background-image: url("~@/assets/imgs/bg2.jpg");
  }

  .container {
    background: transparent;
    width: 450px;
    margin: 10% auto 0;

    .form-wrap {
      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 30px 0;
      background: #fff;

      border-radius: 21px;
      padding: 30px;
    }

    h1 {
      text-align: center;
    }
  }

  .dialog-footer {
    text-align: center;
  }

  .page-title {
    display: flex;
    align-items: center;
    margin-bottom: 44px;
    color: #fff;
    justify-content: center;
    &__img {
      height: 28px;
    }

    &__text {
      font-size: 25px;
      margin-left: 18px;
      font-weight: bold;
    }
  }

  .sub-btn {
    width: 370px;
    height: 44px;
    background: linear-gradient(90deg, #263c92, #266dd8);
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    border-radius: 22px;
  }
}

.diy-form-item {
  margin-bottom: 22px;
}
</style>

<template>
  <div class="wrap">
    <div class="container">
      <div class="page-title">
        <img class="page-title__img" src="~@/assets/imgs/logo1.png" />
        <div class="page-title__text">沃森供应商系统</div>
      </div>
      <div class="form-wrap">
        <el-form
          ref="loginForm"
          status-icon
          :model="loginFormData"
          :rules="loginRules"
          label-position="right"
        >
          <el-form-item required label="" prop="account">
            <el-input
              v-model="loginFormData.account"
              v-on:keydown="loginFunc($event)"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item required label="" prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-on:keydown="loginFunc($event)"
              v-model="loginFormData.password"
            ></el-input>
          </el-form-item>
          <div class="diy-form-item">
            <el-checkbox style="color: #666666;" v-model="saveCookie">记住密码</el-checkbox>
          </div>
        </el-form>

        <div class="dialog-footer">
          <el-button
            :disabled="!loginFormData.password || !loginFormData.account"
            :loading="loginReqLoading"
            type="primary"
            class="fun-btn-primary sub-btn"
            @click="loginFunc"
            >立即登录
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import Exception from "@/common/exception";
import { userLogin } from "@/api";
import { Form } from "element-ui";
import Cookie from "@/common/cookie";

@Component({
  mixins: [],
  components: {}
})
export default class Login extends Vue {
  @Action("setUserInfo") setUserInfo;

  saveCookie = false;
  loginReqLoading = false;
  loginFormData: any = {
    account: "",
    password: ""
  };
  loginRules = {
    account: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "密码必填", trigger: "blur" }]
  };

  resetForm(formName: string) {
    (this.$refs[formName] as Form).resetFields();
  }

  async loginFunc(event: any = null) {
    try {
      if (event && event.type == "keydown" && event.keyCode != 13) {
        return;
      }

      this.loginReqLoading = true;
      (this.$refs.loginForm as Form).validate((valid: any) => {
        if (!valid) {
          throw Error("表单校验未通过");
        }
      });
      const userInfo = await userLogin(
        {
          user_name: this.loginFormData.account,
          user_passwd: this.loginFormData.password
        },
        { tip: "提交信息" }
      )
        .then(res => {
          if (this.saveCookie) {
            console.log("勾选了记住密码，现在开始写入cookie");
            Cookie.setCookie("user_name", this.loginFormData.account, 1440 * 3);
            Cookie.setCookie(
              "user_passwd",
              this.loginFormData.password,
              1440 * 3
            );
          } else {
            console.log("没有勾选记住密码，现在开始删除账号cookie");
            Cookie.delCookie("user_name");
            Cookie.delCookie("user_passwd");
          }

          return res.data;
        })
        .catch(err => {
          throw err;
        });
      this.setUserInfo(userInfo);

      //重置表单
      this.resetForm("loginForm");

      this.loginReqLoading = false;

      const forwardStr = this.$route.query.forwardUrl;
      const forwardUrl = forwardStr
        ? decodeURIComponent(String(forwardStr))
        : "";

      if (forwardUrl) {
        this.$router.push({
          path: forwardUrl
        });
      } else {
        this.$router.push({
          path: "/"
        });
      }
    } catch (e) {
      console.log(e);
      this.loginReqLoading = false;
      Exception.handle(e);
    }

    // loadingInstance.close()
  }

  created() {
    const user_name = Cookie.getCookie("user_name");
    const user_passwd = Cookie.getCookie("user_passwd");
    if (user_name) this.loginFormData.account = user_name;
    if (user_passwd) this.loginFormData.password = user_passwd;
    if(user_name && user_passwd)this.saveCookie = true
  }

  mounted() {
    this.$nextTick().then(() => {
      const h: any = document.body.clientHeight;
      localStorage.setItem("clientHeight", h);
      document.onkeydown = event => {
        const e = event || window.event;
        if (e && e.keyCode == 13) {
          //回车键的键值为13
          this.loginFunc();
        }
      };
    });
  }
}
</script>
